<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //document.getElementsByName返回的是一个dom对象的集合
        //集合的顺序就是在html页面从上到下的顺序
        //checked 表示复选框的选中状态，如果是true就是选中 如果是false就是不选
        //checked 属性是可读可写的。

        //全选
        function f1() {

            var hobbyElements = document.getElementsByName("hobby");
            for (var i = 0; i < hobbyElements.length; i++) {
                hobbyElements[i].checked = true;
            }
        }
        //全不选
        function f2(){
            var hobbyElements = document.getElementsByName("hobby");
            for (var i = 0; i < hobbyElements.length; i++) {
                hobbyElements[i].checked = false;
            }
        }
        //反选
        function f3(){
            var hobbyElements = document.getElementsByName("hobby");
            for (var i = 0; i < hobbyElements.length; i++) {
                if (hobbyElements[i].checked == false){
                    hobbyElements[i].checked = true;
                }else{
                    hobbyElements[i].checked = false
                }
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" value="cpp" name="hobby">C++
    <input type="checkbox" value="java" name="hobby">java
    <input type="checkbox" value="js" name="hobby">javascript
    <br/>
    <button onclick="f1()">全选</button>
    <button onclick="f2()">全不选</button>
    <button onclick="f3()">反选</button>
</body>
</html>